import * as echarts from 'echarts';
import { deepClone } from '@/utils/index';

const map_visual = ({ seriesData = [], seriesName = '', mapJson = {}, mapName = '', cursor = 'auto' }) => {
  echarts.registerMap(mapName, mapJson);

  const defaultConfig = {
    tooltip: {
      confine: true,
      trigger: 'item',
      formatter: (params) => {
        let content =
          `<span">${params.seriesName || params.data.seriesName}</span><br />` +
          `${params.name}&nbsp;&nbsp;<span style="font-weight:bold;">${params.data.value}</span><br />`;
        return content;
      },
    },
    visualMap: {
      // type: 'continuous',
      type: 'piecewise',
      left: 50,
      itemWidth: 25,
      itemHeight: 20,
      min: 0,
      max: 30,
      pieces: [
        { gte: 60 },
        { lt: 60, gte: 55 },
        { lt: 55, gte: 50 },
        { lt: 50, gte: 45 },
        { lt: 45, gte: 40 },
        { lt: 40 },
      ],
      inRange: {
        // color: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee08b', '#ffffbf'],
        // color: ['#9e0106', '#d6404e', '#f57547', '#fdb96a', '#fee89a', '#f5fbb1'],
        // color: ['#ff0000', '#fe2e17', '#fc5b2f', '#fb8946', '#f9b65d', '#fee89a'],
        color: ['#fffac8', '#fee89a', '#f9b65d', '#fb8946', '#fc5b2f', '#ff0000'],
      },
      text: ['高', '低'],
      textStyle: {
        fontSize: 14,
        color: '#fff',
      },
      calculable: true,
      showLabel: true,
    },
    grid: {
      top: '20%',
      left: '0.8%',
      right: '4%',
      bottom: '4%',
      containLabel: true,
    },
    series: [
      {
        name: seriesName,
        type: 'map',
        map: mapName,
        data: seriesData,
        cursor: cursor,
        zoom: 1.7,
        left: '45%',
        itemStyle: {
          areaColor: '#999',
          //   normal: { label: { show: true } },
          emphasis: {
            label: {
              show: true,
              fontSize: 13,
              color: '#fff',
              textBorderColor: '#444',
              textBorderWidth: 3,
            },
          },
        },
        label: {
          show: true,
          fontSize: 13,
          color: '#fff',
          textBorderColor: '#444',
          textBorderWidth: 3,
        },
        select: {
          disabled: true,
        },
        markLine: {
          animation: false,
          label: {
            show: true,
            fontSize: 13,
            color: '#fff',
            textBorderColor: '#444',
            textBorderWidth: 3,
            formatter: '{b}',
          },
          lineStyle: {
            color: '#eee',
            width: 2,
            type: 'dashed',
          },
          data: [],
        },
      },
    ],
  };

  const opt = deepClone(defaultConfig);
  return opt;
};

export default {
  map_visual,
};
